<template>
  <div class="common-layout">
    <el-container id="container">
      <el-main>
        <div id="condition">
          <el-input
              v-model="userNameQuery"
              style="width: 240px"
              placeholder="请输入用户名"
              :prefix-icon="Search"
              size="large"
          />
          <el-input
              v-model="displayNameQuery"
              style="width: 240px"
              placeholder="请输入昵称"
              :prefix-icon="Search"
              size="large"
          />
          <el-input
              v-model="phoneQuery"
              style="width: 240px"
              placeholder="请输入手机号"
              :prefix-icon="Search"
              size="large"
          />
          <el-button type="success" @click="handleQuery" size="large">
            查询
          </el-button>
        </div>
        <div id="tableDiv">
          <el-table
              id="table"
              :data="tableData"
              border
              size="large"
              table-layout="fixed">
            <el-table-column prop="uid" label="用户id" v-if="false"/>
            <el-table-column prop="uPic" label="用户头像">
              <template v-slot="{ row }">
                <el-image :src="imgPrefix + row.uPic" fit="cover" style="max-height: 100px; max-width: 100px"/>
              </template>
            </el-table-column>
            <el-table-column prop="uCreatedAt" label="用户注册时间"/>
            <el-table-column prop="displayName" label="昵称"/>
            <el-table-column prop="username" label="用户名"/>
            <el-table-column prop="phone" label="手机号"/>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <div id="commentPage">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :disabled="false"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background layout="total, sizes, prev, pager, next, jumper"/>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import {ElNotification, ElMessageBox} from "element-plus";
import request from "@/request.js";
import {request2} from "@/request.js";
import qs from 'qs'
import {ref, reactive, onMounted, onBeforeUnmount, inject} from "vue";
import {Lock, User, Cellphone, UserFilled, Search} from "@element-plus/icons-vue";
import SessionStorage from "@/SessionStorage.js";
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import moment from "moment";

const imgPrefix = inject('imgPrefix');
const loginUser = SessionStorage.getItem("loginUser");

// 查询model
const userNameQuery = ref("");
const displayNameQuery = ref('');
const phoneQuery = ref('');

// 分页插件
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);

const tableData = reactive([]);

const userQueryDto = reactive({
  username: userNameQuery.value,
  displayName: displayNameQuery.value,
  phone: phoneQuery.value,
  pageNo: currentPage.value,
  pageSize: pageSize.value,
});
const handleQuery = () => {
  userQueryDto.username = userNameQuery.value;
  userQueryDto.displayName = displayNameQuery.value;
  userQueryDto.phone = phoneQuery.value;
  userQueryDto.pageNo = currentPage.value;
  userQueryDto.pageSize = pageSize.value;
  request2({
    url: "/user/admin/query",
    method: "post",
    data: userQueryDto
  }).then(res => {
    if ('200' === res.code && res.data !== null) {
      tableData.splice(0, tableData.length);
      tableData.push(...res.data.list);
      pageSize.value = res.data.pageSize;
      currentPage.value = res.data.pageNo;
      totalCount.value = res.data.totalCount;
    }
  })
}
handleQuery();

const handleCurrentChange = async (newPage) => {
  console.log("pageNo修改为第" + newPage + "页！");
  currentPage.value = newPage;
  userQueryDto.pageNo = newPage;
  // 查询
  handleQuery();
};

// 处理每页显示数量改变的方法
const handleSizeChange = (newSize) => {
  console.log("pageSize修改为每页" + newSize + "条！");
  pageSize.value = newSize;
  currentPage.value = 1;

  userQueryDto.pageSize = newSize;
  // 查询
  handleQuery();
};
</script>
<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

#condition {
  display: flex;
  justify-content: center;
  align-items: center;
}

#condition .el-input {
  margin: 30px 20px;
}
</style>
